import QtQuick 2.9
import QtQuick.Window 2.3
Window {
    height: 600
    width: 600
    Rectangle { id: rect1; color: "blue"; width: 100; height: 100}
    Rectangle { 
        id: rect2
        width: 100
        height: 100
        anchors.left: rect1.right
        anchors.right: rect3.left
        color: "red"
        
    }
    Rectangle {
        color: "lightblue"
        width: 300; height: 200
        Flow {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 10

            Text { text: "Text"; font.pixelSize: 40 }
            Text { text: "items"; font.pixelSize: 40 }
            Text { text: "flowing"; font.pixelSize: 40 }
            Text { text: "inside"; font.pixelSize: 40 }
            Text { text: "a"; font.pixelSize: 40 }
            Text { text: "Flow"; font.pixelSize: 40 }
            Text { text: "item"; font.pixelSize: 40 }
        }
    }
    Rectangle { id: rect3; x: 300; color: "blue"; height:100; width:100 }
    //Item {
    //    anchors.bottom: parent.bottom
    //    //anchors.horizontalCenter: parent.horizontalCenter
    //    anchors.right: parent.right
    //    anchors.left: parent.left
    //    width: 300
    //    height: 150
        Row {
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            //anchors.horizontalCenter: parent.horizontalCenter
            spacing: 5
            Rectangle { 
                color: "lightblue"; radius: 10.0; width: 100; height: 30
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 24; text: "Books" 
                } 
            }
            Rectangle {
                id: "music"
                color: "gold"; radius: 10.0 ;width: 100; height: 30
                Text { 
                    anchors.centerIn: parent
                    font.pointSize: 24; text: "Music" 
                } 
            }
            Rectangle { 
                color: "lightgreen"; radius: 10.0; width: 100; height: 30
                Text { 
                    anchors.centerIn: parent
                    font.pointSize: 24; text: "Movies" 
                } 
            }
            Rectangle { 
                color: "#912BD5"; radius: 10.0; width: 100; height: 30
                Text { 
                    anchors.centerIn: parent
                    font.pointSize: 24; text: "Sports" 
                } 
            }
        }
    //}
    Rectangle {
        width: 110; height: 320
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        color: "#c0c0c0"
        Column {
            spacing: 5
            Rectangle { width: 100; height: 100; radius: 20.0; color: "#024c1c" }
            Rectangle { width: 100; height: 100; radius: 20.0; color: "#42a51c" }
            Rectangle { width: 100; height: 100; radius: 20.0; color: "black" }
        }
    }
    Rectangle {
        anchors.right: parent.right
        width: 112; height: 112
        color: "#303030"
        Grid {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            columns: 2; spacing: 6
    
            Rectangle { color: "#aa6666"; width: 50; height: 50 }
            Rectangle { color: "#aaaa66"; width: 50; height: 50 }
            Rectangle { color: "#9999aa"; width: 50; height: 50 }
            Rectangle { color: "#6666aa"; width: 50; height: 50 }
        }
    }
}
